<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>taobao</title>
    <link rel="stylesheet" href="taobao.css">
</head>

<body>
    <div class="header">
        <div class="top-nav">
            <ul class="top-nav-left">
                <li class="top-nav-menu china">
                    <span class="chaina-span">中国大陆</span>
                    <span class="xsj"></span>
                </li>
                <li class="top-nav-menu loginAndreg">
                    <a href="#" class="login">亲,请登陆</a>
                    <a href="#" class="reg">免费注册</a>
                </li>
                <li class="top-nav-menu phone">
                    <a href="#">手机逛淘宝</a>
                </li>
            </ul>
            <ul class="top-nav-right">
                <li class="top-nav-menu myTaobao">
                    <a href="#">我的淘宝</a>
                    <span class="xsj"></span>
                </li>
                <li class="top-nav-menu shopCarPic">
                    <a href="#">
                    	<span class="gwc"></span>
                    	<span>购物车</span>
            		</a>
                </li>
                <li class="top-nav-menu like">
                    <a href="#">
                		<span class="star"></span>
                		<span> 收藏夹</span>
                		<span class="xsj"></span>
                	</a>
                </li>
                <li class="top-nav-menu goods">
                    <a href="#">商品分类</a>
                </li>
                <li class="top-nav-menu cutOff">
                    <span>|</span>
                </li>
                <li class="top-nav-menu seller">
                    <a href="#">卖家中心</a>
                    <span class="xsj"></span>
                </li>
                <li class="top-nav-menu">
                    <a href="#">联系客服</a>
                    <span class="xsj"></span>
                </li>
                <li class="top-nav-menu">
                    <a href="#">
					<span class="web"></span>
					<span>网站导航</span>
					</a>
                    <span class="xsj"></span>
                </li>
            </ul>
        </div>
        <!-- 顶部导航栏 -->
        <div class="search">
            <div class="search-logo">
                <img src="img/logo.png" alt="logo">
            </div>
            <div class="search-box">
                <div class="tab">
                    <ul>
                        <li class="select"><span>宝贝</span></li>
                        <li><span>天猫</span></li>
                        <li><span>店铺</span></li>
                    </ul>
                </div>
                <div class="panel">
                    <form action="#">
                        <div class="search-inp">
                            <a href="#" class="sousuo"></a>
                            <input type="text" placeholder="请为你的机甲命名!">
                        </div>
                        <a href="#" class="camera"></a>
                        <div class="btn">
                            <button>搜索</button>
                        </div>
                    </form>
                </div>
                <div class="search-ft">
                    <ul>
                        <li><a href="#">队长</a></li>
                        <li><a href="#">马克</a></li>
                        <li class="F"><a href="	#">博士</a></li>
                        <li><a href="#">机甲</a></li>
                        <li><a href="#">雷神</a></li>
                        <li><a href="#">长裤</a></li>
                        <li><a href="#">蜘蛛侠</a></li>
                        <li><a href="#">緑巨人</a></li>
                        <li><a href="#">飞行符</a></li>
                        <li><a href="#">钢铁侠</a></li>
                        <li><a href="#">战争机器</a></li>
                        <li><a href="#">宇宙宝石</a></li>
                        <a href="#" class="more">更多</a>
                </div>
            </div>
            <div class="code-box">
                <a href="#" class="close">X</a>
                <a href="#" class="pht">手机淘宝</a>
                <a href="#" class="code"></a>
            </div>
        </div>
        <!-- 搜索结束 -->
        <div class="scrren-nac-wrap">
            <div class="scrren-nav-con">
                <h2>主题市场</h2>
                <ul>
                    <li><a href="#">异次元</a></li>
                    <li><a href="#">瓦罗兰</a></li>
                    <li><a href="#">姆巴佩</a></li>
                </ul>
                <ul>
                    <li>|</li>
                    <li><a href="#">法国</a></li>
                    <li><a href="#">中国</a></li>
                    <li><a href="#">巴西</a></li>
                    <li><a href="#">德国</a></li>
                    <li><a href="#">克罗地亚</a></li>
                </ul>
                <ul>
                    <li>|</li>
                    <li><a href="#">冰岛</a></li>
                    <li><a href="#">葡萄牙</a></li>
                    <li><a href="#">西班牙</a></li>
                </ul>
            </div>
        </div>
        <div class="screen-box-wrap">
            <div class="main">
                <div class="main-inner">
                    <div class="inner-left">
                        <ul>
                            <li>
                                <a href="#">迪迦</a>/
                                <a href="#">泰罗</a>/
                                <a href="#">魔神</a>
                                <span class="ico">></span>
                            </li>
                            <li>
                                <a href="#">机甲</a>/
                                <a href="#">机甲</a>/
                                <a href="#">魔神</a>
                                <span class="ico">></span>
                            </li>
                            <li>
                                <a href="#">机甲</a>/
                                <a href="#">机甲</a>/
                                <a href="#">魔神</a>
                                <span class="ico">></span>
                            </li>
                            <li>
                                <a href="#">机甲</a>/
                                <a href="#">机甲</a>/
                                <a href="#">魔神</a>
                                <span class="ico">></span>
                            </li>
                            <li>
                                <a href="#">机甲</a>/
                                <a href="#">机甲</a>/
                                <a href="#">魔神</a>
                                <span class="ico">></span>
                            </li>
                            <li>
                                <a href="#">机甲</a>/
                                <a href="#">机甲</a>/
                                <a href="#">魔神</a>
                                <span class="ico">></span>
                            </li>
                            <li>
                                <a href="#">机甲</a>/
                                <a href="#">机甲</a>/
                                <a href="#">魔神</a>
                                <span class="ico">></span>
                            </li>
                            <li>
                                <a href="#">机甲</a>/
                                <a href="#">机甲</a>/
                                <a href="#">魔神</a>
                                <span class="ico">></span>
                            </li>
                            <li>
                                <a href="#">机甲</a>/
                                <a href="#">机甲</a>/
                                <a href="#">魔神</a>
                                <span class="ico">></span>
                            </li>
                            <li>
                                <a href="#">机甲</a>/
                                <a href="#">机甲</a>/
                                <a href="#">魔神</a>
                                <span class="ico">></span>
                            </li>
                            <li>
                                <a href="#">机甲</a>/
                                <a href="#">机甲</a>/
                                <a href="#">魔神</a>
                                <span class="ico">></span>
                            </li>
                            <li>
                                <a href="#">机甲</a>/
                                <a href="#">机甲</a>/
                                <a href="#">魔神</a>
                                <span class="ico">></span>
                            </li>
                            <li>
                                <a href="#">机甲</a>/
                                <a href="#">机甲</a>/
                                <a href="#">魔神</a>
                                <span class="ico">></span>
                            </li>
                            <li>
                                <a href="#">机甲</a>/
                                <a href="#">机甲</a>/
                                <a href="#">魔神</a>
                                <span class="ico">></span>
                            </li>
                            <li>
                                <a href="#">机甲</a>/
                                <a href="#">机甲</a>/
                                <a href="#">魔神</a>
                                <span class="ico">></span>
                            </li>
                            <li>
                                <a href="#">机甲</a>/
                                <a href="#">机甲</a>/
                                <a href="#">魔神</a>
                            </li>
                        </ul>
                    </div>
                    <div class="inner-con">
                        <div class="pic-box">
                            <a href="#" class="maddle-pic1">
                    		</a>
                            <img src="img/pic2.png" alt="">
                            <ul class="list">
                                <li><a href="#" class="select"></a></li>
                                <li><a href="#"></a></li>
                                <li><a href="#"></a></li>
                                <li><a href="#"></a></li>
                                <li><a href="#"></a></li>
                                <li><a href="#"></a></li>
                            </ul>
                        </div>
                        <div class="inner-mall">
                            <div class="head">
                                <span class="tm-pic"></span>
                                <span class="tm">理想生活上慕课</span>
                            </div>
                            <a href="#">
                        		<img src="img/pic3.png" alt="">
                        	</a>
                        </div>
                    </div>
                </div>
                <div class="col-middle">
                    <a href="#" class="middle-pic1">
                		<img src="img/pic1.png" alt="">
                	</a>
                    <div class="middle-pic2">
                        <h5>今日热卖</h5>
                        <a href="#" class="middle-pic2">
                    		<img src="img/pic4.png" alt="">
                    	</a>
                    </div>
                </div>
                <div class="main-bottom">
                    <div class="buttom-con">
                        <div class="logo">
                            <img src="img/tbtt.png" alt="">
                        </div>
                        <a href="#" class="tbttcon">
                			<img src="img/pic5.png" alt="">
                			<h4>《钢铁侠》（Iron Man)</h4>
                			<p>是由美国漫威电影工作室出品的一部科幻冒险电影，改编自同名系列漫画，由乔恩·费儒执导，小罗伯特·唐尼及格温妮斯·帕特洛、杰夫·布里吉斯等主演。</p>
                		</a>
                    </div>
                </div>
            </div>
            <div class="col-right">
                <div class="member">
                    <div class="member-bd">
                        <div class="tx">
                            <a href="#">
            					<img src="img/tx.jpg" alt="">
            				</a>
                        </div>
                        <span class="hello">Hi! 你好</span>
                        <p>
                            <a href="#" class="icon">
            					<span class="pic"></span>
            					淘金币
            				</a>
                            <a href="#" class="club">
            					<span class="pic"></span>
            					佣兵俱乐部
            				</a>
                        </p>
                    </div>
                    <div class="member-ft">
                        <a href="#" class="login">登录</a>
                        <a href="#">注册</a>
                        <a href="#">开店</a>
                    </div>
                </div>
                <div class="message">
                    <a href="#">
            			网上举报有害信息
            			<span></span>
            		</a>
                </div>
                <div class="notice">
                    <div class="title">
                        <ul>
                            <li><a href="#">公告</a></li>
                            <li><a href="#">规则</a></li>
                            <li><a href="#">论坛</a></li>
                            <li><a href="#" class="select">安全</a></li>
                            <li><a href="#">公益</a></li>
                        </ul>
                    </div>
                    <div class="con">
                        <ul>
                            <li><a href="#">天灾事件</a></li>
                            <li><a href="#">绝地事件</a></li>
                            <li><a href="#">王者事件</a></li>
                            <li><a href="#">没有绝对安全的系统</a></li>
                        </ul>
                    </div>
                </div>
                <div class="moudle">
                    <ul>
                        <li><a href="#">
            				<span class="pic1">
            					<p>项目</p>
            				</span>
            			</a>
                        </li>
                        <li><a href="#">
            				<span class="pic2">
            					<p>项目</p>
            				</span>
            			</a>
                        </li>
                        <li><a href="#">
            				<span class="pic3">
            					<p>项目</p>
            				</span>
            			</a>
                        </li>
                        <li>
                        	<a href="#">
	            				<span class="pic4">
	            					<p>项目</p>
	            				</span>
	            			</a>
                        </li>
                        <li><a href="#">
            				<span class="pic5">
            					<p>项目</p>
            				</span>
            			</a>
                        </li>
                        <li><a href="#">
            				<span class="pic6">
            					<p>项目</p>
            				</span>
            			</a>
                        </li>
                        <li><a href="#">
            				<span class="pic7">
            					<p>项目</p>
            				</span>
            			</a>
                        </li>
                        <li><a href="#">
            				<span class="pic8">
            					<p>项目</p>
            				</span>
            			</a>
                        </li>
                        <li><a href="#">
            				<span class="pic9">
            					<p>项目</p>
            				</span>
            			</a>
                        </li>
                        <li><a href="#">
            				<span class="pic10">
            					<p>项目</p>
            				</span>
            			</a>
                        </li>
                        <li><a href="#">
            				<span class="pic11">
            					<p>项目</p>
            				</span>
            			</a>
                        </li>
                        <li><a href="#">
            				<span class="pic12">
            					<p>项目</p>
            				</span>
            			</a>
                        </li>
                    </ul>
                </div>
                <div class="app">
                	<h3>阿里APP
                		<a href="#">
                			更多>
                		</a>
                	</h3>
                	<ul>
                		<li>
                			<a href="#"><img src="img/smalllogo1.png" alt=""></a>
                		</li>
                		<li>
                			<a href="#"><img src="img/smalllogo2.png" alt=""></a>
                		</li>
                		<li>
                			<a href="#"><img src="img/smalllogo3.png" alt=""></a>
                		</li>
                		<li>
                			<a href="#"><img src="img/smalllogo4.png" alt=""></a>
                		</li>
                		<li>
                			<a href="#"><img src="img/smalllogo5.png" alt=""></a>
                		</li>
                		<li>
                			<a href="#"><img src="img/smalllogo6.png" alt=""></a>
                		</li>
                		<li>
                			<a href="#"><img src="img/smalllogo7.png" alt=""></a>
                		</li>
                		<li>
                			<a href="#"><img src="img/smalllogo8.png" alt=""></a>
                		</li>
                		<li>
                			<a href="#"><img src="img/smalllogo9.png" alt=""></a>
                		</li>
                		<li>
                			<a href="#"><img src="img/smalllogo10.png" alt=""></a>
                		</li>
                	</ul>
                </div>
            </div>
        </div>
    </div>
</body>

</html>